<template>
	<el-form :inline="true"
	         size="mini">
		<header class="search-header">
			<div v-for="item in search.form"
			     :key="item.key">
				<slot :name="item.key">
					<el-form-item :label="item.label"
					              v-if="item.type === 'text'">
						<el-input v-model.trim="queryForm[item.key]"
						          :placeholder="item.placeholder"></el-input>
					</el-form-item>
					<el-form-item v-else-if="item.type === 'select'" :label="item.label">
						<el-select v-if="item.remote === true"
												v-model.trim="queryForm[item.key]"
												filterable
    										remote
												:remote-method="remoteMethod(item.key)"
    										:loading="remoteLoading"
						           :placeholder="item.placeholder">
							<el-option v-for="item in remoteOptions"
							           :key="item.value"
							           :label="item.label"
							           :value="item.value">
							</el-option>
						</el-select>
						<el-select v-else v-model.trim="queryForm[item.key]"
						           :placeholder="item.placeholder">
							<el-option v-for="item in item.options"
							           :key="item.value"
							           :label="item.label"
							           :value="item.value">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item :label="item.label"
												v-if="item.type === 'year' ||
												item.type === 'month' ||
												item.type === 'date' ||
												item.type === 'dates' ||
												item.type === 'week' ||
												item.type === 'datetime' ||
												item.type === 'datetimerange' ||
												item.type === 'daterange' ||
												item.type === 'monthrange'">
						<el-date-picker
							v-model.trim="queryForm[item.key]"
							:type="item.type"
							:format="item.format ? item.format :'yyyy-MM-dd HH:mm:ss'"
      				:value-format="item.format ? item.format :'yyyy-MM-dd HH:mm:ss'"
							:placeholder="item.placeholder ? item.placeholder :'请选择日期'"
							:start-placeholder="item.startPlaceholder ? item.startPlaceholder :'请选择开始日期'"
      				:end-placeholder="item.endPlaceholder ? item.endPlaceholder :'请选择结束日期'"
						>
						</el-date-picker>
					</el-form-item>
				</slot>
			</div>
			<el-form-item>
				<el-button v-for="item in search.operates"
				           :type="item.color"
				           :key="item.type"
				           :icon="item.icon?item.icon:''"
				           :loading="item.type === 'search' ? search.loading : false "
				           @click="handlerSearch(item)">
					<span v-if="item.type === 'search'">{{ search.loading ? '查询中...':item.name }}</span>
					<span v-else>{{item.name}}</span>
				</el-button>
				<el-button type="info"
				           icon="el-icon-remove-outline"
				           @click="queryResetForm">
					重置
				</el-button>
			</el-form-item>
		</header>
	</el-form>
</template>
<script>
export default {
	props : {
		search : {
			type : Object,
			required : true
		}
	},
	data () {
		return {
			remoteLoading : false, // 远程搜索loading
			remoteOptions : [], // 远程搜索options
			queryForm : {}
		};
	},
	methods : {
		// 重置
		queryResetForm () {
			if (this.queryForm) {
				for (const key in this.queryForm) {
					this.queryForm[key] = '';
				}
			}
			this.$emit('handlerSearch', {}, this.queryForm);
		},
		// 操作
		handlerSearch (types) {
			this.$emit('handlerSearch', types, this.queryForm);
		},
		// 远程搜索执行函数
		remoteMethod (key){
			return (query) => {
				if (query !== '') {
					this.remoteLoading = true;
					this.$emit('searchRemoteMethod',key,(options)=>{
						this.remoteLoading = false;
						this.remoteOptions = options;
					});
				} else {
					this.remoteOptions = [];
				}
			};

		}
	}
};
</script>
<style lang="scss" scoped>
.search-header {
  display: flex;
	flex-wrap: wrap;
}
</style>
